<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        table,
        th,
        td {
            border: 1px solid;
        }

        th,
        td {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>

    <input type="text" id="text">
    <p id="p_p"></p>
    <input type="password" id="password">
    <input type="button" value="提交" id="btn">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        const tbody = document.querySelector('tbody');



        btn.onclick = function () {
           
            let arrStr = localStorage.getItem('users');
            arr = JSON.parse(arrStr)
            let result = arr.filter(item => item.name == text.value.trim() && item.password == password.value
                .trim())[0];
            if (result) {
                console.log(`你好${text.value}`);
                // p_p.innerText = `你好${text.value}`
                let r = localStorage.getItem('student');
                let data;
                if (r == null) {
                    data = Mock.mock({
                        "list|5": [{
                            'id|+1': 1, // 对象的 id 属性从 1 开始自增
                            'name': '@cname',
                            "score|50-100": 1,
                            'age|16-25': 1,
                            "gender|1": ["男", "女"],
                            "phoneNumber": /^1[3458]\d{9}$/
                        }]
                    }).list;
                    tbody.innerHTML = data.map(item =>
                        ` 
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>${item.score}</td>
                        <td>${item.phoneNumber}</td>
                        </tr>`
                    ).join('');
                    let studentStr = JSON.stringify(data);
                    console.log(studentStr);
                    data = localStorage.setItem('student', studentStr)

                } else {
                    let x = localStorage.getItem('student');
                    let objsrt = JSON.parse(x)
                    tbody.innerHTML = objsrt.map(item =>
                        ` 
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>${item.score}</td>
                        <td>${item.phoneNumber}</td>
                        </tr>`
                    ).join('');
                }


            } else {
                console.log(2222);
            }
        }
    </script>
</body>

</html>